<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    template="/templates/common/template.xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="left">
        <ui:include src="menuacordion.xhtml" />
    </ui:define> 

    <h:head>

    </h:head>

    <ui:define name="content">    
        <h:outputScript target="body">
            var cana4=document.getElementById("idFormAlu:dnidAlu").disabled=true;
            var cana5=document.getElementById("idFormAlu:apePatAlu").disabled=true;
            var cana6=document.getElementById("idFormAlu:apeMatAlu").disabled=true;
            var cana7=document.getElementById("idFormAlu:dirAlu").disabled=true; 
            var cana8=document.getElementById("idFormAlu:calAlu").disabled=true; 
            var cana8=document.getElementById("idFormAlu:sexAlu").disabled=true; 

            function activar(){
            var cana4=document.getElementById("idFormAlu:dnidAlu").disabled=false;
            var cana5=document.getElementById("idFormAlu:apePatAlu").disabled=false;
            var cana6=document.getElementById("idFormAlu:apeMatAlu").disabled=false;
            var cana7=document.getElementById("idFormAlu:dirAlu").disabled=false; 
            var cana8=document.getElementById("idFormAlu:calAlu").disabled=false; 
            var cana9=document.getElementById("idFormAlu:sexAlu").disabled=false; 
            }

            function desactivar(){
            var cana4=document.getElementById("idFormAlu:dnidAlu").disabled=true;
            var cana5=document.getElementById("idFormAlu:apePatAlu").disabled=true;
            var cana6=document.getElementById("idFormAlu:apeMatAlu").disabled=true;
            var cana7=document.getElementById("idFormAlu:dirAlu").disabled=true; 
            var cana8=document.getElementById("idFormAlu:calAlu").disabled=true; 
            var cana9=document.getElementById("idFormAlu:sexAlu").disabled=true; 
            }
            
            function limpiarCampos(){
            document.getElementById("idFormAlu:dnidAlu").value="";
            document.getElementById("idFormAlu:apePatAlu").value="";
            document.getElementById("idFormAlu:apeMatAlu").value="";
            document.getElementById("idFormAlu:dirAlu").value="";
            document.getElementById("idFormAlu:calAlu").value="";
            document.getElementById("idFormAlu:sexAlu").value="";
            }
            
            

        </h:outputScript>
        <h:outputStylesheet>
        .top {
        vertical-align: top;
        }
 
        .info {
        height: 202px;
        overflow: auto;
        }
    </h:outputStylesheet>
        <h:body >
            <h1>Registro Alumnos</h1>
            <h:form id="idFormAlu" > 
                <rich:tabPanel id="idTabAlumno" switchType="client"> 
                    <rich:tab header="Datos Generales">
                        <table>
                            <tr>
                                <td> <h:panelGrid columns="6" cellspacing="10">

                            <h:outputText value="Código:" />
                            <h:inputText id="idcodAlu" 
                                         value="#{alumnoBean.idAlumno}"
                                         >
                            </h:inputText>

                            <h:outputText value="DNI:" />
                            <h:inputText id="dnidAlu" 
                                         value="#{alumnoBean.dni}"
                                         >
                            </h:inputText>

                            <h:outputText value="Nombres: "/>
                            <h:inputText id="nomAlu"
                                         value="#{alumnoBean.nombres}"
                                         >
                            </h:inputText>

                            <h:outputText value="Apellido Paterno:" />
                            <h:inputText id="apePatAlu" 
                                         value="#{alumnoBean.apellidoPaterno}"
                                         >
                            </h:inputText>

                            <h:outputText value="Apellido Materno:" />
                            <h:inputText id="apeMatAlu" 
                                         value="#{alumnoBean.apellidoMaterno}"
                                         >
                            </h:inputText>



                            <h:outputText value="Direccion: " />
                            <h:inputText id="dirAlu" 
                                         value="#{alumnoBean.direccion}"
                                         >
                            </h:inputText>

                            <h:outputText value="Fecha de Nacimiento: " />
                            <rich:calendar id="calAlu"
                                           value="#{alumnoBean.fechaNacimiento}"
                                           locale="#{calendarBean.locale}"
                                           >         
                            </rich:calendar>

                            <h:outputText value="Sexo: " />
                            <rich:select id="sexAlu" 
                                         value="#{alumnoBean.sexo}"
                                         >
                                <f:selectItem id="item1" itemValue="M" itemLabel="Masculino" />
                                <f:selectItem id="item2" itemValue="F" itemLabel="Femenino" />
                            </rich:select>


                        </h:panelGrid>
                                </td> 
                           
                                <td>
                                    <h:panelGrid >
                                        <img alt="Alumno" src="./images/alumnos/elena.jpg" width="133px" height="147px"/>
                                     </h:panelGrid>
                                 </td>
            
                            </tr>
                                
                        </table>
                       
                        
                    </rich:tab>

                    <rich:tab header="Ubicación">

                    </rich:tab>          


                    <rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">

                        <span >
                            <span >
                                <a4j:commandButton id="btnNuevo" 
                                                   value="Nuevo" 
                                                   onclick="activar()"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>
                            <span >
                                <h:commandButton id="btnEditar" 
                                                 value="Editar"/>
                            </span>
                            <span >
                                <h:commandButton id="btnGrabar" 
                                                 value="Grabar"
                                                 action="#{alumnoBean.agregarAlumno}"
                                                 />
                            </span>

                            <span >
                                <a4j:commandButton id="btnEliminar" 
                                                   value="Eliminar" 
                                                   action="#{alumnoBean.deleteAlumno()}"  
                                                   render="idcodAlu"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>

                            <span >
                                <h:commandButton id="btnCancelar" 
                                                 value="Cancelar"/>
                            </span>

                            <span >
                                <a4j:commandButton id="btnBuscar" 
                                                   value="Buscar" 
                                                   oncomplete="#{rich:component('popupAlumno')}.show()"
                                                   action="#{alumnoBean.listAlumnoById()}"  
                                                   render="popupAlumno"
                                                   execute="@this">
                                </a4j:commandButton>
                            </span>
                            <span >
                                <a4j:commandButton id="btnListar" 
                                                   value="Listar Alumno" 
                                                   oncomplete="#{rich:component('popupAlumno')}.show()"
                                                   action="#{alumnoBean.listAlumnoAll()}"  
                                                   render="popupAlumno"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>
                            
                            <span>
                            <h:commandButton  action="#{reportsBean.execute}" value="Get Report" />
                            </span>
                        </span>
                        <br/>
                        <h:outputText  id="txtMensaje" value="#{profesorBean.mensaje}" style="color:#ff0000;"  />
                    </rich:panel>
                </rich:tabPanel>
            </h:form> 

            <rich:popupPanel id="popupAlumno" 
                             autosized="true" 
                             onmaskclick="#{rich:component('popupAlumno')}.hide()">
                <f:facet name="controls">
                    <h:outputLink value="#" onclick="#{rich:component('popupAlumno')}.hide();
                            return false;">X</h:outputLink>
                </f:facet>
                <h:panelGrid columns="1" id="editGrid">
                    <rich:dataTable value="#{alumnoBean.lisAlumno}" 
                                    var="alu" 
                                    id="tb_Alumno" 
                                    rows="15">
                        <rich:column>
                            <f:facet name="header">Codigo</f:facet>
                            <h:outputText value="#{alu.idAlumno}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Nombres</f:facet>
                            <h:outputText value="#{alu.nombres}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Apellido Paterno</f:facet>
                            <h:outputText value="#{alu.apellidoPaterno}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Apellido Materno</f:facet>
                            <h:outputText value="#{alu.apellidoMaterno}" />
                        </rich:column>

                        <rich:column>
                            <f:facet name="header">Dirección</f:facet>
                            <h:outputText value="#{alu.direccion}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Fecha</f:facet>
                            <h:outputText value="#{alu.fechaNacimiento}" />
                        </rich:column>

                        <rich:column>
                            <a4j:commandLink styleClass="no-decor" render="idcodAlu,dnidAlu,nomAlu,apePatAlu,apeMatAlu,dirAlu,calAlu,sexAlu" execute="@this" action="#{alumnoBean.pintarFormularioAlumno()}"
                                              onclick="#{rich:component('popupAlumno')}.hide()">
                                <h:graphicImage value="/images/icons/edit.gif"/>
                                <f:setPropertyActionListener target="#{alumnoBean.idAlumno}" value="#{alu.idAlumno}" />
                            </a4j:commandLink>
                        </rich:column>

                        <f:facet name="footer">
                            <rich:dataScroller page="1" />
                        </f:facet>
                    </rich:dataTable>
                </h:panelGrid>
            </rich:popupPanel>



        </h:body>
    </ui:define>
</ui:composition>
